<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


	<title>国风汉服</title>


	<script>
		// axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';//给请求头设置默认值
		$(function (){
			new Vue({
				el: "#app2",
				data: {
					daohang:[],
					msg_dh:"", //导航搜索的内容
					goodsinfos:[],//主分类对应所有商品
					page: {
						page:1,
						pages:[],
						allpage:"",
					},
					allFenLei:[],//所有分类
					allClassValue:[],//所有规格-值
					lv1:"",
					lv2:"",
					lv3:"",
					kClassValue:[],
					condition:{//选择的规格
						classValue:[], //值
						categoryId:1, //类别ID
						priceMax:"",
						priceMix:"",
						page:1,
						size:"",
					},
					dataCV:[],
					a: { 'border-style': 'solid',
					'border-color':' #909090' , }


				},
				methods:{
					gogogo:function (){
						for(let ind in this.kClassValue){
							this.condition.classValue.push(this.kClassValue[ind]);
						}
						console.log("111this.condition-priceMax",this.condition.priceMix,this.condition.priceMax);
						// console.log(",.,.,.",this.condition);
						axios.get('/goodsinfo/pageGoodsinfoListByCondition',this.condition,{headers:{'JWT':localStorage.getItem("JWT")}}).then(r=>{
							if(r.data.code==200){
								this.goodsinfos=r.data.data.dataVO;
								this.page=r.data.data;
								if(this.goodsinfos.length==0){
									layer.msg("暂无此类商品 o(╥﹏╥)o",{time:3000,icon:0})
								}
							}else if(r.data.code==333){
								axios.get('/goodsinfo/allList',{headers:{'JWT':localStorage.getItem("JWT")}}).then(r=>{
									if(r.data.code==200){
										this.goodsinfos=r.data.data.records;
										this.page=r.data.data;
										// layer.msg("(*´▽｀)ノノ",{time:3000,icon:0})
									}
								})

							}
						})
					},
					getPrice:function (min,max){
						this.condition.priceMix=min;
						this.condition.priceMax=max;
						console.log("111this.condition-priceMax",this.condition.priceMix,this.condition.priceMax);
					},
					getWeb:function (c,val){
						this.kClassValue[c]=val;
						let list=new Array();
						for(let r in this.kClassValue){
							let str= r+':'+this.kClassValue[r];
							if(!(list.includes(str))){
								list.push(str);
								this.dataCV=list;
							}
						}
						console.log("+page+",this.page)
						// console.log(">>kClassValue>>>",this.kClassValue);
						// console.log(">>cv>>>",this.kClassValue.toString());
						// console.log(">>dataCV>>>",this.dataCV);

					},
					getGoodsinfoListByPid:function (id){
						// console.log("==||==",this.condition.categoryId);
						axios.get('/goodsinfo/pageGoodsinfoListByPid?id='+id,{headers:{'JWT':localStorage.getItem("JWT")}}).then(r=>{
							if(r.data.code==200){
								// console.log("pageGoodsinfoListByPid<>:",r.data.data);
								this.goodsinfos=r.data.data.dataVO;
								this.page=r.data.data;
								if(this.goodsinfos.length==0){
									layer.msg("暂无此类商品 o(╥﹏╥)o",{time:3000,icon:0})
								}
							}
						})
					},

					cha:function(){  //导航搜索
						let msgnew=this.msg_dh;
						console.log('msg',msgnew);
						axios.get('/goodsinfo/likeList?msg='+msgnew,{headers:{'JWT':localStorage.getItem("JWT")}}).then(r=>{
							if(r.data.code==200){
								this.goodsinfos=r.data.data.dataVO;
								this.page=r.data.data;
								 // console.log('this.goodsinfos.length==0',this.goodsinfos.length);
								if(this.goodsinfos.length==0){
									layer.msg("暂无此类商品 o(╥﹏╥)o",{time:3000,icon:0})
								}
							}
						})

					},
					goGoods:function(g){
						let goodsinfo={
							id:g.id,
							pid:g.pid,
							name:g.goodsName,
							miaoshu:g.descriptors,
						}
						console.log("h获取明确商品的分类",goodsinfo);
						localStorage.setItem("goodsinfo",JSON.stringify(goodsinfo));
						location.href="item_show.html";
					},
				},
				mounted:function(){
					let msg=localStorage.getItem("category_msg");
					if(msg!=null){
						this.msg_dh=msg;
					}
					let category_id=localStorage.getItem("category_id");
					// localStorage.removeItem('category_id')
					if(category_id !=null){
						// layer.msg(category_id+"^(*￣(oo)￣)^拿到了!",{time:4000,icon:2})
						axios.get('/goodsinfo/pageGoodsinfoListByPid?id='+category_id,{headers:{'JWT':localStorage.getItem("JWT")}}).then(r=>{
							if(r.data.code==200){
								this.goodsinfos=r.data.data.dataVO;

								if(this.goodsinfos.length==0){
									layer.msg("暂无此类商品 o(╥﹏╥)o",{time:3000,icon:0})
								};
								// console.log('商品info',this.goodsinfos);
							}
						})
					}else{
						layer.msg(category_id+"^(*￣(oo)￣)^没拿了!",{time:4000,icon:2})
						axios.get('/goodsinfo/allList',{headers:{'JWT':localStorage.getItem("JWT")}}).then(r=>{
							if(r.data.code==200){
								// console.log("获取到goodinfolist:",r.data.data.records);
								this.goodsinfos=r.data.data.records;
								this.page=r.data.data;
								this.page.page=r.data.data.current;
								// console.log('商品this.page',this.page);
							}
						})
					};
					//全部分类
					axios.get('/category/allHfCategoryList',{headers:{'JWT':localStorage.getItem("JWT")}}).then(r=>{
						if(r.data.code==200){
							// console.log("allfl",r.data.data);
							this.allFenLei=r.data.data;
						}
					});
					//全部规格
					axios.get('/category/allHfClassValueList',{headers:{'JWT':localStorage.getItem("JWT")}}).then(r=>{
						if(r.data.code==200){
							// console.log("allClassValue",r.data.data);
							this.allClassValue=r.data.data;
						}
					})
				}
			});
		})

	</script>

	<script>
		$(function(){
			$("#header").load("/header.html");
		})
	</script>
	<style scoped>

	</style>

</head>
<body>

<!-- 顶部tab -->
<div id="header"></div>
	<div id="app2">
<!--	&lt;!&ndash; 顶部tab &ndash;&gt;-->
<!--	<div class="tab-header">-->
<!--		<div class="inner">-->
<!--			<div class="pull-left">-->
<!--				<div class="pull-left">嗨，欢迎来到<span class="cr">XXX</span></div>-->
<!--				<a href="agent_level.html">网店代销</a>-->
<!--				<a href="temp_article/udai_article4.html">帮助中心</a>-->
<!--			</div>-->
<!--			<div class="pull-right">-->
<!--				<a href="login22.html"><span class="cr">登录</span></a>-->
<!--				<a href="login22.html?p=register">注册</a>-->
<!--				<a href="udai_welcome222.html">我的U袋</a>-->
<!--				<a href="udai_order.html">我的订单</a>-->
<!--				<a href="udai_integral.html">积分平台</a>-->
<!--			</div>-->
<!--		</div>-->
<!--	</div>-->
	<!-- 搜索栏 -->
	<div class="top-search">
		<div class="inner">
			<a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="XXX" class="cover"></a>
			<div class="search-box">
				<form class="input-group">
					<input placeholder="Ta们都在这里搜❥(^_-)" type="text"  v-model.trim="msg_dh">
					<span class="input-group-btn">
						<button type="button"  @click="cha()">
							<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
						</button>
					</span>
				</form>
			</div>
			<div class="cart-box">
				<a href="udai_shopcart.html" class="cart-but">
					<i class="iconfont icon-shopcart cr fz16"></i> 购物车 0 件
				</a>
			</div>
		</div>
	</div>
	<!-- 内页导航栏 -->
	<div class="top-nav bg3">
		<div class="nav-box inner">
			<div class="all-cat">
				<div class="title"><i class="iconfont icon-menu"></i> 全部分类</div>
			</div>
			<ul class="nva-list">
				<a href="index.html"><li>首页</li></a>
				<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
				<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
				<a href="class_room.html"><li>U袋学堂</li></a>
				<a href="enterprise_id.html"><li>企业账号</li></a>
				<a href="udai_contract.html"><li>诚信合约</li></a>
				<a href="item_remove.html"><li>实时下架</li></a>
			</ul>
		</div>
	</div>
	<div class="content inner">
		<section class="filter-section clearfix">
			<ol class="breadcrumb">
				<li><a href="index.html">首页</a></li>
				<li class="active">商品筛选</li>
			</ol>
			<div class="filter-box">
				<div class="all-filter">
					<div class="filter-value">
						<div class="filter-title">选择商品分类 <i class="iconfont icon-down"></i></div>
						<!-- 全部大分类 -->
						<ul class="catelist-card">
							<a href=""><li class="active">全部分类</li></a>
							<div  v-for="lv1 in allFenLei"  >
								<span><a href="javascript:void(0)" @click="getGoodsinfoListByPid(lv1.id,condition.categoryId=lv1.id)" ><li>{{lv1.category}}=>>:</li></a></span>
								<div  v-for="lv2 in lv1.children">
									<a href="javascript:void(0)" @click="getGoodsinfoListByPid(lv2.id,condition.categoryId=lv2.id)" ><li>{{lv2.category}}=></li></a>
									<div  v-for="lv3 in lv2.children">
										<a href="javascript:void(0)" @click="getGoodsinfoListByPid(lv3.id,condition.categoryId=lv3.id)" ><li>{{lv3.category}}</li></a>
									</div>
								</div>
							</div>
						</ul>
						<!-- 已选选项 -->
						<div class="ul_filter" >
							<span class="pull-left" v-for="cv in dataCV" >
								{{cv}} <a href="item_category.html" class="close">&times;</a>
							</span>
						</div>
						<a class="reset pull-right" href="item_category.html">重置</a>
					</div>
				</div>
				<div class="filter-prop-item">
					<span class="filter-prop-title">分类：</span>
					<ul class="clearfix">
						<a href=""><li class="active">全部</li></a>
						<a href="javascript:void(0)" @click="getGoodsinfoListByPid(lv1.id,condition.categoryId=lv1.id)"  v-for="lv1 in allFenLei"><li>{{lv1.category}}</li></a>

					</ul>
				</div>
				<div class="filter-prop-item" v-for="cv in  allClassValue">
					<span class="filter-prop-title">{{cv[0]}}：</span>
					<ul class="clearfix">
						<a href="" ><li class="active">全部</li></a>
						<a href="javascript:void(0)"  v-for="(v,index) in  cv"  v-if="index >0"   @click="getWeb(cv[0],v)"><li>{{v}}</li></a>

					</ul>
				</div>

				<div class="filter-prop-item">
					<span class="filter-prop-title">价格：</span>
					<ul class="clearfix">
						<a href=""><li class="active">全部</li></a>
						<a href="javascript:void(0)"   @click="getPrice(0,20)" ><li>0-20</li></a>
						<a href="javascript:void(0)"   @click="getPrice(20,40)"><li>20-40</li></a>
						<a href="javascript:void(0)"   @click="getPrice(40,80)"><li>40-80</li></a>
						<a href="javascript:void(0)"   @click="getPrice(80,100)"><li>80-100</li></a>
						<a href="javascript:void(0)"   @click="getPrice(100,150)"><li>100-150</li></a>
						<a href="javascript:void(0)"   @click="getPrice(150)"><li>150以上</li></a>
						<form class="price-order" action="getPrice(condition.priceMix,condition.priceMax)">
							<input type="text" v-model="condition.priceMix" >
							<span class="cc">-</span>
							<input type="text" v-model="condition.priceMax" >
							<input type="button" value="确定"  @click="gogogo()" >
						</form>
					</ul>
				</div>
			</div>
<!--			<div class="sort-box bgf5">-->
<!--				<div class="sort-text">排序：</div>-->
<!--				<a href=""><div class="sort-text">销量 <i class="iconfont icon-sortDown"></i></div></a>-->
<!--				<a href=""><div class="sort-text">评价 <i class="iconfont icon-sortUp"></i></div></a>-->
<!--				<a href=""><div class="sort-text">价格 <i class="iconfont"></i></div></a>-->
<!--				<div class="sort-total pull-right">共1688个商品</div>-->
<!--			</div>-->
		</section>
		<section class="item-show__div clearfix">
			<div class="pull-left">
				<div class="item-list__area clearfix">
					<div class="item-card" v-for="goodsinfo in goodsinfos" :key="goodsinfo.id">
						<a  href="javascript:void(0)" @click="goGoods(goodsinfo)" class="photo">
							<img :src="goodsinfo.coverPath" :alt="goodsinfo.goodsName" class="cover">
							<div class="name">{{goodsinfo.goodsName}}</div>
						</a>
						<div class="middle">
							<div class="price"><small>￥</small>{{goodsinfo.price}}</div>
							<div class="sale"><a href="javascript:void(0)" @click="goGoods(goodsinfo)">加入购物车</a></div>
						</div>
						<div class="buttom">
							<div>销量 <b>666</b></div>
							<div>人气 <b>888</b></div>
							<div>评论 <b>1688</b></div>
						</div>
					</div>
				</div>
				<!-- 分页 -->
				<div class="page text-right clearfix">
					<a class="disabled">上一页</a>
					<a class="select" v-for="p in page.pages">{{p}}</a>
					<a class="" href="">下一页</a>
					<a class="disabled">{{page.page}}/{{page.allpage}}页</a>
					<form action="" class="page-order">
						到第
						<input type="text" name="page">
						页
						<input class="sub" type="submit" value="确定">
					</form>
				</div>
			</div>
			<div class="pull-right">
				
				<div class="desc-segments__content">
					<div class="lace-title">
						<span class="c6">爆款推荐</span>
					</div>
					<div class="picked-box">
						<a href="" class="picked-item"><img src="images/temp/S-001.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-002.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-003.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-004.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-005.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-006.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-007.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-008.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-009.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
						<a href="" class="picked-item"><img src="images/temp/S-010.jpg" alt="" class="cover"><span class="look_price">¥134.99</span></a>
					</div>
				</div>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item">
				<a href="udai_welcome222.html" class="r-item-hd">
					<i class="iconfont icon-user" data-badge="0"></i>
					<div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_shopcart.html" class="r-item-hd">
					<i class="iconfont icon-cart"></i>
					<div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_collection.html" class="r-item-hd">
					<i class="iconfont icon-aixin"></i>
					<div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="" class="r-item-hd">
					<i class="iconfont icon-liaotian"></i>
					<div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="issues.html" class="r-item-hd">
					<i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
				</a>
			</li>
			<li class="r-toolbar-item to-top">
				<i class="iconfont icon-top"></i>
				<div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
			</li>
		</ul>

	</div>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="footer-links inner">
			<dl>
				<dt>XXX</dt>
				<a href="temp_article/udai_article10.html"><dd>企业简介</dd></a>
				<a href="temp_article/udai_article11.html"><dd>加入U袋</dd></a>
				<a href="temp_article/udai_article12.html"><dd>隐私说明</dd></a>
			</dl>
			<dl>
				<dt>服务中心</dt>
				<a href="temp_article/udai_article1.html"><dd>售后服务</dd></a>
				<a href="temp_article/udai_article2.html"><dd>配送服务</dd></a>
				<a href="temp_article/udai_article3.html"><dd>用户协议</dd></a>
				<a href="temp_article/udai_article4.html"><dd>常见问题</dd></a>
			</dl>
			<dl>
				<dt>新手上路</dt>
				<a href="temp_article/udai_article5.html"><dd>如何成为代理商</dd></a>
				<a href="temp_article/udai_article6.html"><dd>代销商上架教程</dd></a>
				<a href="temp_article/udai_article7.html"><dd>分销商常见问题</dd></a>
				<a href="temp_article/udai_article8.html"><dd>付款账户</dd></a>
			</dl>
		</div>
		<div class="copy-box clearfix">
			<ul class="copy-links">
				<a href="agent_level.html"><li>网店代销</li></a>
				<a href="class_room.html"><li>U袋学堂</li></a>
				<a href="udai_about.html"><li>联系我们</li></a>
				<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
				<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2005-2017 XXX 版权所有，并保留所有权利<br>
				ICP备案证书号：闽ICP备XXX号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市XXX&nbsp;&nbsp;&nbsp;&nbsp;Tel: XXX&nbsp;&nbsp;&nbsp;&nbsp;E-mail: XXX@qq.com
			</p>
		</div>
	</div>
	</div>
<!--	<script>-->
<!--		$(document).ready(function(){ $('.to-top').toTop({position:false}) });-->
<!--	</script>-->
</body>
</html>